<template>
    <a-modal
        :title="title"
        :width="900"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :okButtonProps="{ props: {disabled: disabled} }"
        cancelText="关闭">

        <a-spin :spinning="confirmLoading">
            <a-form :form="form">
                <a-row style="width: 100%;">
                    <a-col :span="24">
                        <a-form-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            label="条款名称">
                            <a-input placeholder="请输入条款名称" v-decorator="['name', validatorRules.name]"
                                     :readOnly="disableSubmit"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            label="条款级别">
                            <a-input placeholder="请输入条款级别" v-decorator="['level', validatorRules.level]"
                                     :readOnly="disableSubmit"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            label="条款生效日期:">
                            <j-date style="width: 100%" :getCalendarContainer="node => node.parentNode"
                                    v-decorator="[ 'startDate', validatorRules.startDate]" placeholder="请选择开始时间"
                                    showTime dateFormat="YYYY-MM-DD"></j-date>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            label="条款失效日期"
                            class="endTime">
                            <j-date style="width: 100%" :getCalendarContainer="node => node.parentNode"
                                    v-decorator="[ 'endDate', validatorRules.endDate]" placeholder="请选择结束时间" showTime
                                    dateFormat="YYYY-MM-DD"></j-date>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item
                            :labelCol="labelColX1"
                            :wrapperCol="wrapperColX1"
                            label="条款描述"
                            class="j-field-content">
                            <j-editor v-decorator="[ 'description', {} ]" triggerChange></j-editor>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-spin>
    </a-modal>
</template>

<script>
import { httpAction } from '@api/manage'
import pick from 'lodash.pick'
import { getAction } from '@api/manage'
import JDate from '@comp/jeecg/JDate'
import JEditor from '@comp/jeecg/JEditor'
import moment from 'moment'

export default {
    components: { JEditor, JDate,  },
    name: 'lawClauseModal',
    data() {
        return {
            title: '操作',
            visible: false,
            disableSubmit: false,
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 }
            },
            labelColX1: {
                xs: { span: 24 },
                sm: { span: 3 }
            },
            wrapperColX1: {
                xs: { span: 24 },
                sm: { span: 21 }
            },
            confirmLoading: false,
            form: this.$form.createForm(this),
            validatorRules: {
                name: { rules: [{ required: true, message: '请输入条款名称!' }] },
                level: { rules: [{ required: true, message: '请输入条款级别!' }] },
                endDate: { rules: [{ required: true, message: '请选择条款失效日期!' }, { validator: this.endTimeValidate }] },
                startDate: {
                    rules: [{
                        required: true,
                        message: '请选择条款生效日期!'
                    }, { validator: this.startTimeValidate }]
                },
                description: { rules: [{ required: true, message: '请输入条款描述!' }] }
            },
            url: {
                queryByIds: '/sys/user/queryByIds',
                add: '/hc/lawClause/add',
                edit: '/hc/lawClause/updateById'
            },
            userType: false,
            userIds: [],
            selectedUser: [],
            disabled: false,
            msgContent: '',
            userList: []
        }
    },
    created() {
    },
    methods: {
        add() {
            this.edit({})
        },
        edit(record) {
            this.form.resetFields()
            this.model = {}
            this.disable = false
            this.visible = true
            this.getUser(record)
        },
        getUser(record) {
            this.model = Object.assign({}, record)
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.model, 'name', 'level', 'startDate', 'endDate', 'description', ))
            })
        },
        close() {
            this.$emit('close')
            this.selectedUser = []
            this.visible = false
        },
        handleOk() {
            const that = this
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true
                    let httpurl = ''
                    let method = ''
                    if (!this.model.id) {
                        httpurl += this.url.add
                        method = 'post'
                    } else {
                        httpurl += this.url.edit
                        method = 'post'
                    }
                    let formData = Object.assign(this.model, values)
                    httpAction(httpurl, formData, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message)
                            that.$emit('ok')
                        } else {
                            that.$message.warning(res.message)
                        }
                    }).finally(() => {
                        that.confirmLoading = false
                        that.close()
                    })

                }
            })
        },
        handleCancel() {
            this.visible = false
            this.$emit('close')
        },

        startTimeValidate(rule, value, callback) {
            let endTime = this.form.getFieldValue('endDate')
            if (!value || !endTime) {
                callback()
            } else if (moment(value).isBefore(endTime)) {
                callback()
            } else {
                callback('开始时间需小于结束时间')
            }
        },
        endTimeValidate(rule, value, callback) {
            let startTime = this.form.getFieldValue('startDate')
            if (!value || !startTime) {
                callback()
            } else if (moment(startTime).isBefore(value)) {
                callback()
            } else {
                callback('结束时间需大于开始时间')
            }
        },
    }
}
</script>

<style scoped>

</style>
